          <?php echo $this->Html->css('tabelas') . PHP_EOL; ?>
          <?php echo $this->Session->flash(); ?>
          <div class="row">
            <div class="span9">
              <form id="frmFiltro"
                    action="<?php echo $this->Html->url(array('controller' => 'viagens', 'action' => 'ofertasDeCarona')); ?>"
                    method="get"
                    accept-charset="utf-8">
              </form>
              <table id="tbl-caronas" class="tabela">
                <thead>
                  <tr>
                    <th class="col-id">#</th>
                    <th class="col-data"><i class="icon-calendar"></i> Data</th>
                    <th class="col-hora"><i class="icon-time"></i> Hora</th>
                    <th class="col-origem"><i class="icon-map-marker"></i> Origem</th>
                    <th class="col-destino"><i class="icon-flag"></i> Destino</th>
                    <th class="col-assentos"><i class="icon-star"></i> Assentos</th>
                  </tr>
                  <tr class="row-filters">
                    <td class="col-id"></td>
                    <td><input id="filtroData" name="data[Viagem][data_partida]" class="inputFiltro" type="date" form="frmFiltro"></td>
                    <td><input id="filtroHora" name="data[Viagem][hora_partida]" class="inputFiltro" type="time" form="frmFiltro"></td>
                    <td><input id="filtroOrigem" name="data[MunicipioOrigem][nome]" class="inputFiltro" type="text" form="frmFiltro"></td>
                    <td><input id="filtroDestino" name="data[MunicipioDestino][nome]" class="inputFiltro" type="text" form="frmFiltro"></td>
                    <td><input id="filtroAssentos" name="data[Viagem][assentos_disponiveis]" class="inputFiltro" type="number" form="frmFiltro"></td>
                  </tr>
                </thead>
                <tbody>
                  <tr linha-selecionada="false">
                    <td class="col-id">1</td>
                    <td class="col-data">16/03/2012</td>
                    <td class="col-hora">07:45</td>
                    <td class="col-origem">Nova Hartz</td>
                    <td class="col-destino">Taquara</td>
                    <td class="col-assentos">4</td>
                  </tr>
                  <tr linha-selecionada="false">
                    <td class="col-id">2</td>
                    <td class="col-data">16/03/2012</td>
                    <td class="col-hora">08:00</td>
                    <td class="col-origem">Parobé</td>
                    <td class="col-destino">Taquara</td>
                    <td class="col-assentos">3</td>
                  </tr>
                  <tr linha-selecionada="false">
                    <td class="col-id">3</td>
                    <td class="col-data">16/03/2012</td>
                    <td class="col-hora">08:30</td>
                    <td class="col-origem">Igrejinha</td>
                    <td class="col-destino">Taquara</td>
                    <td class="col-assentos">2</td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <th colspan="6">
                      <buttom id="btn-pedir-carona" class="btn btn-mini" disabled="disabled">
                        <i class="icon-road"></i> Pedir Carona
                      </buttom>
                      <input type="submit" value="Enviar" form="frmFiltro">
                    </th>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
          <script type="text/template" id="tplItens">
            <td class="col-id"><%= model.get("id") %></td>
            <td class="col-data"><%= model.get("dataPartida") %></td>
            <td class="col-hora"><%= model.get("horaPartida") %></td>
            <td class="col-origem"><%= model.get("origem") %></td>
            <td class="col-destino"><%= model.get("destino") %></td>
            <td class="col-assentos"><%= model.get("assentosDisponiveis") %></td>
          </script>
          <script type="text/javascript">
            // TODO: Considerar colocar esse plugin em um arquivo separado {{{
            /*(function($) {
              $.fn.unsignedIntegerEntry = function() {
                $(this).each(function() {
                  $(this).keydown(handleKey)
                         .keypress(handleKey)
                         .on("change", function(e) {
                           if (this.value.match(/[^0-9]/g)) {
                             this.value = "";
                           }
                         })
                         .on("input", function(e) {
                           $(this).trigger("change");
                         });
                  function handleKey(e) {
                    var key = e.which;
                    var type = e.handleObj.origType;
                    //
                    if (type == "keydown") {
                      if (key == 38 || key == 40) {
                        var value = parseInt(this.value);
                        if (isNaN(value)) {
                          value = 0;
                        }
                        if (key == 38) { // up
                          value++;
                        } else { // down
                          value--;
                        }
                        if (value < 0) {
                          value = 0;
                        }
                        this.value = value;
                      }
                    } else if (type == "keypress") {
                      var keychar = String.fromCharCode(key);
                      if (key != 0 && key != 8) {
                        if (keychar.match(/[^0-9]/)) {
                          e.preventDefault();
                        }
                      }
                    }
                  }
                });
              }
            })(jQuery);
            //}}}
            // Carregamento dinâmico de scripts em lote {{{
            var scripts = [];
            function carregarScripts(callback) {
              // Se todos os scripts foram carregados executa a função 'callback' {{{
              if (scripts == null || scripts.length == 0) {
                callback();
                return;
              }
              //}}}
              var script = scripts[0];
              scripts = scripts.slice(1);
              $.getScript(script, function() { carregarScripts(callback); });
            }
            //}}}
            // TODO: Criar um plugin para aplicar automaticamente pela seleção de uma classe ou atributo, os plugins necessários nos campos em que o
            // navegador não oferece suporte para o inputtype. Isso inclui o carregamento dinâmico de folhas de estilo e scripts necessários pelos
            // plugins aplicados. {{{
            // Testa o suporte a <input type="date">
            if (Modernizr['inputtypes']['date'] !== true) {
              scripts.push('<?php echo $this->Html->webroot('js/jquery.dateentry.min.js'); ?>');
              scripts.push('<?php echo $this->Html->webroot('js/jquery.dateentry-pt.js'); ?>');
            }
            // Testa o suporte a <input type="time">
            if (Modernizr['inputtypes']['time'] !== true) {
              scripts.push('<?php echo $this->Html->webroot('js/jquery.timeentry.min.js'); ?>');
              scripts.push('<?php echo $this->Html->webroot('js/jquery.timeentry-pt.js'); ?>');
            }
            //
            carregarScripts(function() {
              if ($.dateEntry) {
                $('input[type="date"]').dateEntry({spinnerImage: ''});//.datepick({renderer: $.datepick.themeRollerRenderer});
              }
              if ($.timeEntry) {
                $('input[type="time"]').timeEntry({spinnerImage: ''});
              }
            });
            // Testa o suporte a <input type="number">
            if (Modernizr['inputtypes']['number'] !== true) {
              $('#filtroAssentos').unsignedIntegerEntry();
              if ($.browser.msie) {
                $('#filtroAssentos').on("paste", function(e) { // Evento "onpaste" não suportado pelo navegador Opera.
                  e.preventDefault();
                });
              }
            }
            //}}}
            // Selecionar uma linha da tabela {{{
            $('table tbody tr').each(function() {
              $(this).click(function(e) {
                if ($(this).hasClass('row-highlighting')) {
                  $(this).removeClass('row-highlighting')
                         .attr("linha-selecionada", "false");
                  $("#btn-pedir-carona").attr('disabled', 'disabled');
                } else {
                  $(this).closest('table#tbl-caronas')
                         .children('tbody')
                         .children('tr.row-highlighting')
                         .removeClass('row-highlighting')
                         .attr("linha-selecionada", "false");
                  $(this).addClass('row-highlighting')
                         .attr("linha-selecionada", "true");
                  $("#btn-pedir-carona").removeAttr('disabled');
                }
              });
            });
            //}}}
            $("#btn-pedir-carona").click(function(e) {
              //if ($(this).is('[disabled]')) {
              //  return false;
              //}
              var linhaSelecionada = $('table#tbl-caronas tbody tr.row-highlighting');
              if (linhaSelecionada !== null && linhaSelecionada.length > 0) {
                linhaSelecionada = linhaSelecionada[0];
                var id = $(linhaSelecionada).children('td.col-id').text();
                $.pnotify({
                  pnotify_title: 'Pedido realizado com sucesso!',
                  pnotify_text: 'O pedido para carona #' + id + ' foi realizado com sucesso.',
                  pnotify_type: 'info'
                  //pnotify_info_icon: 'picon picon-dialog-information'
                });
              } else {
                $.pnotify({
                  pnotify_title: 'Carona não selecionada',
                  pnotify_text: 'Selecione uma carona primeiro!',
                  pnotify_type: 'error'
                  //pnotify_error_icon: 'picon picon-network-wireless'
                });
              }
            });
            //
            $.ajax({
              url: '/scuf/municipios/obterListaDeMunicipiosParaPesquisa',
              type: 'get',
              dataType: 'json',
              success: function(dados) {
                $("#filtroOrigem").typeahead({
                  source: dados
                });
                $("#filtroDestino").typeahead({
                  source: dados
                });
              }
            });*/
            //
            //$("#filtroOrigem").typeahead({
            //  source: ['Nova Hartz', 'Parobé', 'Taquara', 'Igrejinha', 'Sapiranga', 'Araricá', 'Campo Bom', 'Novo Hamburgo']
            //});
            //$("#filtroDestino").typeahead({
            //  source: ['Nova Hartz', 'Parobé', 'Taquara', 'Igrejinha', 'Sapiranga', 'Araricá', 'Campo Bom', 'Novo Hamburgo']
            //});
            //----------------------------------------------------------------------------------------------------------------------------------------
            $(document).ready(function() {
              var Item = Backbone.Model.extend({
                urlRoot: "viagens/ofertasDeCarona"
              });
              //
              var Lista = Backbone.Collection.extend({
                model: Item
              });
              //
              var TrView = Backbone.View.extend({
                tagName: "tr",
                events: {
                  "click": "selecionarItem",
                },
                tagName: "tr",
                events: {
                  "click": "selecionarItem",
                },
                itemTemplate: _.template($("#tplItens").html()),
                initialize: function() {
                  _.bindAll(this, "render", "unrender", "selecionarItem");
                  this.model.bind("change", this.render);
                  this.model.bind("remove", this.unrender);
                },
                render: function() {
                  $(this.el).attr("linha-selecionada", "false").html(this.itemTemplate({
                    model: this.model
                  }));
                  return this;
                },
                unrender: function(model, options) {
                  $(this.el).remove();
                },
                selecionarItem: function(e) {
                  if ($(this.el).hasClass("row-highlighting")) {
                    $(this.el).removeClass("row-highlighting").attr("linha-selecionada", "false");
                  } else {
                    $(this.el).closest("tbody").children("tr.row-highlighting").removeClass("row-highlighting").attr("linha-selecionada", "false");
                    $(this.el).addClass("row-highlighting").attr("linha-selecionada", "true");
                  }
                },
              });
              //
              var TableView = Backbone.View.extend({
                events: {
                  "keypress .inputFiltro": "filtrar",
                },
                initialize: function() {
                  _.bindAll(this, "render", "adicionarItem");
                  //
                  this.collection = new Backbone.Collection();
                  this.collection.url = "viagens/ofertasDeCarona";
                  this.collection.fetch();
                  this.collection.bind("add", this.adicionarItem);
                  this.render();
                },
                render: function() {
                  //$("form#frmFiltro").submit(this.enviarFiltro);
                  var self = this;
                  //console.log(this.collection.length);
                  _(this.collection.models).each(function(item) {
                    self.adicionarItem(item);
                  }, this);
                },
                adicionarItem: function(item) {
                  //console.log(item);
                  var itemVisualizacao = new TrView({
                    model: item
                  });
                  $("tbody", this.el).append(itemVisualizacao.render().el);
                },
                removerItem: function(item) {
                  alert(item.get("nome") + " removido.");
                  item.destroy();
                },
                itemSelecionado: function() {
                  var selecao = $("tbody tr.row-highlighting", this.el);
                  if (selecao.length > 0) {
                    selecao = selecao[0];
                  } else {
                    selecao = null;
                  }
                  return selecao;
                },
                enviarFiltro: function(e) {
                  var filtros = '';
                  _(e.target.elements).each(function(el) {
                     console.log(el.name + "[" + el.type + "]: " + el.value);
                  });
                  return false;
                },
                filtrar: function(e) {
                  if (e.which == 13) {
                    $(e.target.form).submit();
                  }
                }
              });
              //
              var objVisualizacao = new TableView({
                el: $("table#tbl-caronas")
              });
            });
          </script>